<template>
    <div class="table-box">
        <ProTable ref="proTable" :requestApi="api.queryDictTree" :columns="columns" :pagination="false">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" :icon="CirclePlus"
                    @click="openOptionDialog('新增', {parentId: '0', isLeaf: 1 })">新增</el-button>
                <el-popover placement="bottom-start" title="提示" :width="200" trigger="hover"
                    content="修改数据字典后，需要重新刷新缓存前端才会获取到最新的数据字典信息">
                    <template #reference>
                        <el-button type="default" :icon="Refresh" @click="refreshCache">刷新缓存</el-button>
                    </template>
                </el-popover>
            </template>
            <!-- Expand -->
            <template #expand="scope">
                {{ scope.row }}
            </template>
            <!-- 用户状态 slot -->
            <template #zt="scope">
                <!-- 如果插槽的值为 el-switch，第一次加载会默认触发 switch 的 @change 方法，所有在外层包一个盒子，点击触发盒子 click 方法 -->
                <div @click="changeStatus(scope.row)">
                    <el-switch v-model="scope.row.zt" :active-text="scope.row.dataStatus === 0 ? '正常' : '停用'" :active-value="0"
                        :inactive-value="1" />
                </div>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link :icon="CirclePlus"
                    @click="openOptionDialog('新增', { parentId: scope.row.id, isLeaf: 1 })">新增</el-button>
                <el-button type="primary" link :icon="View"
                    @click="openDictValueDialog({ code: scope.row.code, title: scope.row.name })">字典值</el-button>
                <el-button type="primary" link :icon="EditPen" @click="openOptionDialog('编辑', scope.row)">编辑</el-button>
                <el-button type="primary" link :icon="Delete" @click="onRemove(scope.row)">删除</el-button>
            </template>
        </ProTable>
        <DictValueDialog ref="dictValueDialogRef" />
        <FormDialog ref="formDialogRef"></FormDialog>
    </div>
</template>

<script setup lang="tsx" name="dict">

import { ref, reactive } from "vue";
import { CirclePlus, Delete, EditPen, View, Refresh } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus';
import { useHandleData } from "/@/hooks/useHandleData";

import FormDialog from "./components/FormDialog.vue";

import * as api from "../../../api/system/dict";
import columnsFunction from './columns';
import ProTable from "/@/components/ProTable/index.vue";
import DictValueDialog from "./components/DictValueDialog.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 获取表头信息
const columns = columnsFunction();

const dictValueDialogRef = ref()

//打开用户扩展信息
const openDictValueDialog = (params: any) => {
    dictValueDialogRef.value!.acceptParams(params);
}

/**
 * 刷新缓存
 */
const refreshCache = async () => {
    const data = await api.refreshCache();
    if (data) {
        ElMessage.success('操作成功');
    }
}

//切换部门状态
const changeStatus = async (row: any) => {
    await useHandleData(api.edit, { id: row.id, zt: row.zt === 1 ? 0 : 1 }, `切换【${row.mc}】状态`);
    proTable.value.refresh();
};


// 删除用户信息
const onRemove = async (params: any) => {
    if (params.sfmj === 0) {
        ElMessage.error('非末级节点不能删除')
        return;
    }
    const rest = await useHandleData(api.remove, { id: params.id }, `删除${params.mc}`);
    if(rest && rest.code === 0) {
        proTable.value.refresh();
    }
    
};

// 打开 dialog(新增、查看、编辑)
interface FormDialogExpose {
    acceptParams: (params: any) => void;
}
const formDialogRef = ref<FormDialogExpose>();

const openOptionDialog = (title: string, rowData = {}) => {
    let params = {
        title: title,
        rowData: { ...rowData },
        isView: title === "查看" ? true : false,
        apiUrl: title === "新增" ? api.add : title === "编辑" ? api.edit : "",
        getTableList: proTable.value.refresh
    };
    formDialogRef.value!.acceptParams(params);
};
</script>
